<style lang="scss" >
  .inner1_view_container{
    width: 100%;
    height: 100%;
    background-color: #020f1d;
    overflow-y: scroll;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    padding: 0;
    border: 0;
    padding: 10px;
    .header{
      display: flex;
      justify-content: space-between;
      background: transparent;
      padding: 20px 20px 10px;
      .header_close{
        margin: 10px;
        cursor: pointer;
        color: white;
        transform: scale(2);
      }
    }
    .container_inner{
      overflow-y: scroll;
      width: 1600px;
      margin: 0 auto;

      .inner_title{
        color: #338dbf;
        font-size: 20px;
        margin: 24px 0px 15px 16px;
      }
      .list{
        display: flex;
        justify-content: flex-start;
        .li{
          margin: 8px 16px;
          width: 180px;
          height: 220px;
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 1px solid #0f3056;
          padding-top: 32px;
          box-sizing: border-box;
          background-color: #091f2d;
          border-radius: 3px;
          .li_i{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom:12px;
            img{
              width: 20px;
              height: 20px;
              margin-right: 12px;
            }
            .text{
              font-size:18px;
              color: #6b7a82;
            }
          }
          .li_s{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            img{
              width: 22px;
              height: 22px;
              margin-right: 16px;
            }
            .text{
              font-size:18px;
              color: #bfc4c6;
            }
          }
          .li_w{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 4px 0;
            .text_w{
              margin-right: 12px;
              color: #da4c07;
              font-size: 18px;
            }
            .text{
              font-size:18px;
              color: #bfc4c6;
            }
          }
        }
      }
      .rowl{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 50px;
        .rol{
          margin: 8px 20px;
          width: 290px;
          height: 210px;
          border: 1px solid #0f3056;
          box-sizing: border-box;
          background-color: #091f2d;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 24px;
          border-radius: 3px;
          img{
            width: 82px;
            height: 74px;
          }
          .fuwushichang{
            width: 88px;
            height: 88px;
          }
          .toudicishu{
            width: 80px;
            height: 60px;
          }
          .guzhangshuliang{
            width: 80px;
            height: 80px;
          }
          .mantongcishu{
            width: 80px;
            height: 80px;
          }
          .renliandishu{
            width: 78px;
            height: 80px;
          }
          .rig{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            .text{
              font-size:18px;
              color: #bfc4c6;
            }
            .time{
              margin-top: 18px;
              color: #da4c07;
              font-size: 18px;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              .t{
                margin-right: 16px;
              }
            }
          }
        }
      }
      .cirl{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 50px;
        .cir{
          margin: 8px 12px;
          width: 280px;
          height: 210px;
          border: 1px solid #0f3056;
          box-sizing: border-box;
          background-color: #091f2d;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 24px;
          border-radius: 3px;
          img{
            width: 74px;
            height: 80px;
          }
          .manyibaojing, .guzhangbaojing, .weiruku{
            width: 74px;
            height: 80px;
          }
          .huozaibaojing{
            width: 74px;
            height: 82px;
          }
          .rig{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            .text{
              font-size:18px;
              color: #bfc4c6;
            }
            .time{
              margin-top: 18px;
              color: #da4c07;
              font-size: 18px;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              width: 100%;
              .t{
                width: 100%;
                text-align: center;
              }
            }
          }
        }
      }
      .line_chart{
        display: flex;
        justify-content: space-between;
        margin-bottom: 50px;
      }
    }

    .avue-crud{
      background-color: transparent !important;
      .avue-crud__menu{
        min-height: 10px;
      }
      .el-table{
        background-color: transparent !important;
        border:1px solid #102e50 !important;
        &:before{
          background-color: #102e50;
        }
        .el-loading-mask{
          background-color: rgba(0255,255,255,0.1);
          &:after{
            background-color: #102e50;
          }
        }
        .el-table__header-wrapper,.el-table__body-wrapper{
          background-color: transparent !important;
          table{
            background-color: transparent !important;
            thead, tbody{
              background-color: transparent !important;
              tr{
                background-color: transparent !important;
                th,td{
                  /*background-color: transparent !important;*/
                  background-color: #020f1d;
                  /*border-right:1px solid #102e50;*/
                  border-right:none;
                  border-bottom:1px solid #102e50;
                  .cell{
                    color: #5b7daf;
                  }
                }
                th:not(:nth-last-child(-n + 2)),td:not(:nth-last-child(-n + 2)){
                  border-right:1px solid #102e50;
                }
              }
            }
          }
        }
        .el-table__fixed{
          background-color: transparent !important;
          &:before{
            background-color: #102e50;
          }
          .el-table__fixed-header-wrapper,.el-table__fixed-body-wrapper{
            background-color: transparent !important;
            table{
              background-color: transparent !important;
              thead, tbody{
                background-color: transparent !important;
                tr{
                  background-color: transparent !important;
                  th, td{
                    /*background-color: transparent !important;*/
                    background-color: #020f1d;
                    border-right:none;
                    border-bottom:1px solid #102e50;
                    .cell{
                      color: #5b7daf;
                    }
                  }
                  th:not(:nth-last-child(-n + 2)),td:not(:nth-last-child(-n + 2)){
                    border-right:1px solid #102e50;
                  }
                }
              }
            }
          }
        }
      }
      .el-table--border::after, .el-table--group::after, .el-table::before{
        background-color: transparent;
        display: none;
      }
      .el-pagination__total,.el-pagination__jump{
        color: #fff;
      }
    }
  }

</style>
<template>
  <div class="inner1_view_container">
    <div class="header">
      <div class="left"></div>
      <i class="el-icon-close header_close" color="blue"  size="middle" @click="closeInnerView"></i>
    </div>
    <div class="container_inner">
      <div class="inner_title">内桶详情</div>
      <div class="list">
        <div class="li" v-for="item in listData">
        <span class="li_i">
          <img src="icons/@2x/huojing@2x.png" alt="" v-if="+item.fullStatus === 1">
          <img src="icons/@2x/manyi@2x.png" alt="" v-else-if="+item.fullStatus === 2">
          <img src="icons/@2x/guzhang@2x.png" alt="" v-else>
          <span class="text">满溢</span>
        </span>
          <span class="li_i">
          <img src="icons/@2x/huojing@2x.png" alt="" v-if="+item.fireAlarm === 1">
          <img src="icons/@2x/manyi@2x.png" alt=""  v-else-if="+item.fireAlarm === 2">
          <img src="icons/@2x/guzhang@2x.png" alt="" v-else>
          <span class="text">火警</span>
        </span>
          <span class="li_s">
            <img src="icons/@2x/kehuishoulaji@2x.png" alt="" v-if="+item.garbageType === 1">
            <img src="icons/@2x/yifulaji@2x.png" alt="" v-if="+item.garbageType === 2">
            <img src="icons/@2x/youhailaji@2x.png" alt="" v-if="+item.garbageType === 3">
            <img src="icons/@2x/boli@2x.png" alt="" v-if="+item.garbageType === 4">
            <img src="icons/@2x/suliao@2x.png" alt="" v-if="+item.garbageType === 5">
            <img src="icons/@2x/jinshu@2x.png" alt="" v-if="+item.garbageType === 6">
            <img src="icons/@2x/zhizhang@2x.png" alt="" v-if="+item.garbageType === 7">
            <img src="icons/@2x/qitalaji@2x.png" alt="" v-if="+item.garbageType === 8">
            <span class="text">{{item.garbageTypeName}}</span>
        </span>
          <span class="li_w">
          <span class="text_w">{{item.weight}}</span>
          <span class="text">吨</span>
        </span>
        </div>
      </div>
      <div class="rowl">
        <div class="rol">
          <img src="icons/@2x/fuwushichang@2x.png" alt="" class="fuwushichang">
          <div class="rig">
            <div class="text">设置服务时长</div>
            <div class="time">
              <div class="t">{{rowlData.serviceTime || 0}}</div>
              <div class="text">小时</div>
            </div>
          </div>
        </div>
        <div class="rol">
          <img src="icons/@2x/toudicishu@2x.png" class="toudicishu">
          <div class="rig">
            <div class="text">总投递次数</div>
            <div class="time">
              <div class="t">{{rowlData.deliverTimes || 0}}</div>
              <div class="text">次</div>
            </div>
          </div>
        </div>
        <div class="rol">
          <img src="icons/@2x/guzhangshuliang@2x.png" class="guzhangshuliang">
          <div class="rig">
            <div class="text">故障数量</div>
            <div class="time">
              <div class="t">{{rowlData.faultNumber || 0}}</div>
              <div class="text">次</div>
            </div>
          </div>
        </div>
        <div class="rol">
          <img src="icons/@2x/mantongcishu@2x.png" class="mantongcishu">
          <div class="rig">
            <div class="text">满桶次数</div>
            <div class="time">
              <div class="t">{{rowlData.fullNumber ||0}}</div>
              <div class="text">次</div>
            </div>
          </div>
        </div>
        <div class="rol">
          <img src="icons/@2x/renliandishu@2x.png" class="renliandishu">
          <div class="rig">
            <div class="text">人脸底数</div>
            <div class="time">
              <div class="t">缺数据0</div>
              <div class="text">次</div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner_title">垃圾投递记录</div>
      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="data"
                 ref="crud"
                 v-model="form"
                 :permission="permissionList"
                 :before-open="beforeOpen"
                 @row-del="rowDel"
                 @row-update="rowUpdate"
                 @row-save="rowSave"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @selection-change="selectionChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 :page="page"
                 @on-load="onLoad">
        <template slot-scope="{row}"
                  slot="deptId">
          <!--<el-tag>{{row.deptName}}</el-tag>-->
          {{row.deptName}}
        </template>
        <template slot-scope="{row}"
                  slot="result">
          <!--<el-tag  type="success" v-if="+row.result === 1">合格</el-tag>-->
          <!--<el-tag  type="danger" v-else-if="+row.result === 2">不合格</el-tag>-->
          <!--<el-tag   type="info" v-else>无数据</el-tag>-->
          <span  type="success" v-if="+row.result === 1">合格</span>
          <span  type="danger" v-else-if="+row.result === 2">不合格</span>
          <span   type="info" v-else>无数据</span>
        </template>

      </avue-crud>

      <div class="cirl">
        <div class="cir">
          <img src="icons/@2x/manyibaojing@2x.png" class="manyibaojing">
          <div class="rig">
            <div class="text">满溢报警</div>
            <div class="time">
              <div class="t">{{rowlData.fullAlarmNumber|| 0}}</div>
            </div>
          </div>
        </div>
        <div class="cir">
          <img src="icons/@2x/guzhangbaojing@2x.png" class="guzhangbaojing">
          <div class="rig">
            <div class="text">故障报警</div>
            <div class="time">
              <div class="t">{{rowlData.faultAlarmNumber|| 0}}</div>
            </div>
          </div>
        </div>
        <div class="cir">
          <img src="icons/@2x/huozaibaojing@2x.png" class="huozaibaojing">
          <div class="rig">
            <div class="text">火灾报警</div>
            <div class="time">
              <div class="t">{{rowlData.fireAlarmNumber|| 0}}</div>
            </div>
          </div>
        </div>
        <div class="cir">
          <img src="icons/@2x/weiruku@2x.png" class="weiruku">
          <div class="rig">
            <div class="text">未入库人脸</div>
            <div class="time">
              <div class="t">没数据</div>
            </div>
          </div>
        </div>
        <cirview class="cir_view" :garbageRatio="garbageRatio"></cirview>
      </div>
      <div class="inner_title">垃圾投递记录</div>
      <div class="line_chart">
        <datechartstrans :commonEchartsObj="countDeliverRecord1">
          <span class="e_t">单位：户</span>
        </datechartstrans>
        <datechartstrans :commonEchartsObj="countDeliverRecord2">
          <span class="e_t">单位：千克</span>
        </datechartstrans>
      </div>
    </div>
  </div>
</template>

<script>
  import {listInnerBarrel,getServiceTime,getDeliverTimes,getGarbageDeviceFaultInfo,
    getGarbageRatio,countDeliverRecordNumberByDay, countDeliverWeightByDay,
    getDict, getDictTree, getList, remove, update} from "@/api/device/innerview";
  import {mapGetters} from "vuex";
  import Cirview from '@/components/echart/cirview.vue'
  import Datechartstrans from '@/components/echart/datechartstrans.vue'
  import moment from 'moment'
  export default {
    data() {
      return {
        form: {},
        selectionList: [],
        loading: true,
        query: {},
        page: {
          pageSize: 5,
          currentPage: 1,
          total: 0,
          pageSizes: [5,10,20]
        },
        option: {
          refreshBtn: false,
          searchShow: false,
          tip: false,
          tree: true,
          border: true,
          index: true,
          selection: false,
          editBtn: false,
          delBtn: false,
          menuWidth: 100,
          columnBtn: false,
          addBtn: false,
          menu:false,
          align:'center',
          column: [
            {
              label: "所属组织",
              prop: "deptId",
              type: "select",
              search: false,
              dicUrl: "/api/blade-system/dept/tree",
              props: {
                label: "title",
                value: "id"
              },
              span: 12,
              slot:true,
            },
            {
              label: "幢",
              prop: "block",
              search: false,
              span:12,
            },
            {
              label: "单元",
              prop: "unit",
              search: false,
              span:12,
            },
            {
              label: "户号",
              prop: "door",
              search: false,
              span:12,
            },
            {
              label: "姓名",
              prop: "userName",
              search: false,
              span:12,
            },
            {
              label: "手机号",
              prop: "phone",
              search: false,
              span:12,
            },
            {
              label: "投递重量(g)",
              prop: "weight",
              search: false,
            },
            {
              label: "投递时间",
              prop: "createTime",
              search: false,
            },
            {
              label: "积分",
              prop: "integral",
              search: false,
            },
            {
              label: "投递结果",
              prop: "result",
              search: false,
              slot:true
            }
          ]
        },
        data: [],
        listData: [],
        rowlData: {},
        garbageRatio: {},
        countDeliverRecord1: {
          echarts_name: `innerview1`,
          line_list: [],
          line_date: [],
        },
        countDeliverRecord2: {
          echarts_name: `innerview2`,
          line_list: [],
          line_date: [],
        }
      };
    },
    props:['innerViewRow'],
    components: {Cirview,Datechartstrans},
    computed: {
      ...mapGetters(["userInfo", "permission"]),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        listInnerBarrel({garbageSortDeviceId: this.innerViewRow.id})
          .then(res=> {
            this.listData = [...res.data]

          })
        getServiceTime({garbageSortDeviceId: this.innerViewRow.id})
          .then(res=>{
            this.rowlData.serviceTime = res.data.serviceTime || 0
          })

        getDeliverTimes({garbageSortDeviceId: this.innerViewRow.id})
          .then(res=>{
            this.rowlData.deliverTimes = res.data.deliverTimes || 0
          })

        getGarbageDeviceFaultInfo({garbageSortDeviceId: this.innerViewRow.id})
          .then(res=>{
            this.rowlData = Object.assign(this.rowlData,res.data)
          })

        getGarbageRatio({garbageSortDeviceId: this.innerViewRow.id})
          .then(res=>{
            this.garbageRatio = res.data || {}
          })

        countDeliverRecordNumberByDay({garbageSortDeviceId: this.innerViewRow.id, daysAgo: 10})
          .then(res=> {


            let arr1 = []
            this.countDeliverRecord1.line_date = [];
            (res.data || []).forEach(item => {
              this.countDeliverRecord1.line_date.push(moment(item.deliverDate, 'YYYYMMDD').format('MM-DD'))
              arr1.push(item.number)
            })
            var series = [
              {
                name: '用户增长量',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
                smooth:true,
                symbolSize: 8,
                colorClass: 'kline-pink',
                lineStyle: {
                  width: 1,
                  color: '#1b5070'
                },
                itemStyle: {
                  color: '#1b5070',
                  borderWidth: 1,
                  borderColor: '#1b5070',
                  shadowBlur: 12,
                  shadowColor: '#1b5070',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#1b5070",
                      width: 1,
                    },
                    borderWidth: 1,
                    borderColor: '#1b5070',
                  }
                },
                data: arr1
              }
            ];
            this.$set(this.countDeliverRecord1, 'line_list', series);
          })

        countDeliverWeightByDay({garbageSortDeviceId: this.innerViewRow.id, daysAgo: 10})
          .then(res=> {
            let arr1 = []
            this.countDeliverRecord2.line_date = [];
            (res.data || []).forEach(item => {
              this.countDeliverRecord2.line_date.push(moment(item.deliverDate, 'YYYYMMDD').format('MM-DD'))
              arr1.push(item.weightOfKG)
            })
            var series = [
              {
                name: '垃圾增长量',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
                smooth:true,
                symbolSize: 6,
                colorClass: 'kline-pink',
                lineStyle: {
                  color: '#1b5070'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#1b5070',
                  shadowBlur: 12,
                  shadowColor: '#1b5070',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#1b5070",
                      width: 1
                    },
                    borderWidth: 1,
                    borderColor: '#1b5070',
                  }
                },
                data: arr1
              }
            ];
            this.$set(this.countDeliverRecord2, 'line_list', series);
          })

      },
      closeInnerView() {
        this.$emit('closeInnerView')
      },
      handleAdd(row) {
        this.$refs.crud.value.code = row.code;
        this.$refs.crud.value.parentId = row.id;
        this.$refs.crud.option.column.filter(item => {
          if (item.prop === "code") {
            item.value = row.code;
            item.addDisabled = true;
          }
          if (item.prop === "parentId") {
            item.value = row.id;
            item.addDisabled = true;
          }
        });
        this.$refs.crud.rowAdd();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDict(this.form.id).then(res => {
            this.form = res.data;
          });
        }
        done();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, {garbageSortDeviceId: this.innerViewRow.id}).then(res => {
          this.data = res.data.records;
          this.page.total = res.data.total;
          this.loading = false;
//          getDictTree().then(res => {
//            const column = this.findObject(this.option.column, "parentId");
//            column.dicData = res.data;
//          });
        });
      }
    }
  };
</script>


